<template>
  <div class="hello">
    <MENU></MENU>
    <el-main class="container">
      <div><h1>语法海报生成</h1></div>
      <div class="row">
        <span style="font-size: 25px">第几天：</span>
        <input style="width: 250px;height: 40px;margin-top: -5px" v-model="day">
      </div>
      <div class="row">
        <span style="font-size: 25px">主题句：</span>
        <input style="width: 250px;height: 40px;margin-top: -5px" v-model="example">
      </div>
      <div style="width: 100%;float: left">
        <el-button size="middle" @click="addnode"
                   style="color: white;font-size: 20px;float:left;background-color: lightblue">添加单词
        </el-button>
        <el-button size="middle" @click="download"
                   style="color: white;font-size: 20px;float:left;background-color: lightblue">下载
        </el-button>
      </div>
      <el-dialog width="450px" :visible.sync="show" style="margin-left: 20%">
        <el-row style="width: 90%;display: flex;margin: 50px auto">
          <span style="font-size: 18px;">语法点：</span>
          <textarea style="width:300px;margin-top: -10px " v-model="word.name"></textarea>
        </el-row>
        <el-row style="width: 90%;display: flex;margin: 50px auto">
          <span style="font-size: 18px;">释义及例句：</span>
          <textarea style="width:300px;margin-top: -10px " v-model="word.definition"></textarea>
        </el-row>
        <el-button size="small" style="margin: 20px auto;background-color: lightblue;color: white" @click="save">保存
        </el-button>
      </el-dialog>
      <div style="width: 100%;font-size: 25px;float: left;text-align: left;margin-top: 30px">单词列表</div>
      <div style="width: 100%;font-size: 25px;float: left;text-align: left;margin-top: 30px;font-weight: bold"
           v-if="wordlist.length === 0">未添加任何单词
      </div>
      <div v-for="(i,v) in wordlist" style="width: 100%;float: left" :key="v">
        <div style="width: 20%;float: left;background-color: whitesmoke;margin-top:20px;border-radius: 20px;padding: 30px">
          <i class="el-icon-close" style="font-size: 20px;float: right" v-on:click="deleteWord(v)"></i>
          <div style="width: 100%;font-size: 20px;height: 40px;text-align: left">单词：{{i.name}}</div>
          <div style="width: 100%;font-size: 20px;text-align: left">定义：{{i.definition}}</div>
          <div style="width: 100%;font-size: 20px;text-align: left">解释：{{i.quality}}</div>

        </div>
      </div>
      <div ref="canvas" class="canvas">
        <img src='../assets/logo.png' width="235" alt="logo背景">
        <p class="vocabulary">语 法</p>
        <p class="example">{{example}}</p>
        <div class="vocabularyList">
          <div class="vocabularyInfo" v-for="(i,v) in wordlist" :key="v">
            <p style="color:rgb(58, 96, 219)">{{v+1}}.{{i.name}}</p>
            <p>{{i.definition}}</p>
          </div>
        </div>
        <p style="padding: 15px;font-size: 20px;color: rgb(171,183,221);font-family:Helvetica Neue">DAY <span class="day">{{day}}</span></p>
      </div>
    </el-main>
  </div>
</template>

<script>
  import html2canvas from 'html2canvas'
  import navbar from './navbar'
  import CanvasDraw from '../js/canvas_util'

  export default {
    name: 'HelloWorld',
    components: {
      MENU: navbar
    },
    data() {
      return {
        list: [{contentType: '', number: ''}],
        show: false,
        day:"",
        example:"",
        word: {
          name: '',  //单词
          quality: '',  //解释
          definition: '',  //定义
        },
        wordlist: []
      }
    },
    methods: {
      addnode() {
        this.show = true
        this.word.definition =""
        this.word.quality= ""
        this.word.name = ""
      },
      deleteWord(index) {
        var list = this.wordlist
        list.splice(index, 1)
      },
      save() {
        var obj = {
          name: this.word.name,
          definition: this.word.definition,
        }
        this.wordlist.push(obj)
        this.show = false
      },
      download() {
         let canvasDraw = new CanvasDraw()
          html2canvas(this.$refs.canvas).then((canvas) => {
             canvasDraw.download_canvas(canvas)
          });
       },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  html, body, .hello {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .container {
    position: absolute;
    width: 85%;
    height: 100%;
    left: 15%;
  }

  .row {
    width: 100%;
    height: 80px;
    float: left;
    display: flex;
    margin-top: 50px;
  }

  .row1 {
    width: 100%;
    height: 30px;
    float: left;
    display: flex;
    margin-top: 40px;
  }

  .words {
    width: 80%;
    margin-top: 50px;
    margin-left: 17%;
  }

  canvas, .canvas {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 560px;
    transform: translate(0%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgb(239, 247, 254);
    white-space: pre-wrap;
  }

  .canvas img {
    padding: 20px;
  }

  .canvas .vocabulary {
    font-size: 30px;
    background: rgb(58, 96, 219);
    color: #fff;
    padding: 5px 20px;
    border-radius: 10px;
    margin: 0;
  }

  .canvas .example {
    font-size: 30px;
    background: #fff;
    color: rgb(58, 96, 219);
    border-radius: 35px;
    padding: 15px 70px;
  }

  .canvas .vocabularyList {
    width: 85%;
    font-size: 30px;
    background: #fff;
    border-radius: 35px;
    padding: 20px;
  }
  .canvas .vocabularyList  .vocabularyInfo {
    padding: 15px;
    text-align: left;
  }
  .canvas .vocabularyList  .vocabularyInfo p{
    margin: 0px;
    font-size: 20px;
  }

</style>
